<!-- 代表作：海姆 -->
<script setup>
import { reactive, ref, onMounted, onUnmounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { warnApi } from '@T2/service/api.ts';
import { getMenuParams, getLastdata } from '@T2/utils/params.ts';
import { useRoute } from 'vue-router';
import detail from './components/imgReview.vue';
import DataSide from './framework/dataSide.vue';

const route = useRoute();

const Rt = reactive({
  picImglist: [],
  bigImg: '',
  sensors: [],
});
onMounted(async () => {
  const { sensors, pictures } = getMenuParams(route.path);
  if (!sensors?.length) {
    ElMessage.error('未配置参数！');
    return;
  }
  const { curIds, diffIds } = await getLastdata(sensors);
  Rt.sensors = sensors;
  
  const [ pictures0, pictures1 ] = pictures || [];
  if (!pictures0?.c?.length) {
    return;
  }
  Rt.picImglist = pictures0.c;
  if (!pictures1?.c?.length) {
    return;
  }
  const [ pictures10 ] = pictures1.c;
  Rt.bigImg = pictures10.v;
  
});

function changeValue(value) {
  if (value) {
    if (value > 0 && value <= 10) {
      return Math.floor((value / 10) * 50);
    } else if (value > 10 && value <= 100) {
      return Math.floor((value / 100) * 50);
    } else if (value > 100 && value <= 500) {
      return Math.floor((value / 500) * 50);
    } else if (value > 500 && value <= 1000) {
      return Math.floor((value / 1000) * 50);
    } else if (value > 1000 && value <= 5000) {
      return Math.floor((value / 5000) * 50);
    } else if (value > 5000 && value <= 10000) {
      return Math.floor((value / 10000) * 50);
    }
  }
};

let timerAlarm = null;
let timers = null;
const animate = ref(false);
const alarmList = ref([]);
const showBtn = ref(true);

const showImgObj = reactive({ show: false, imgList: [], index: 0 });
const toFatherValue = () => {
  // showImgObj.show = false;
  showImgObj.data = Rt.picImglist;
  showImgObj.index = 0;
}
const showImgAll = (index) => {
  showImgObj.show = true;
  showImgObj.data = Rt.picImglist;
  showImgObj.index = index;
}
const getImg = (v) => {
  return new URL(`../../../assets/aby/${v || '08'}.png`, import.meta.url).href;
};

const toggleImg = () => {
  showBtn.value = !showBtn.value;
}
const getAlarmInfo = () => {
  warnApi({
    method: 'get',
    params: {
      page: 1,
      ordering: '-create_time',
      reset_time__isnull: true,
    },
  }).then((res) => {
    let { results } = res;
    if (results && results.length > 0) {
      let arr = [];
      results.forEach((item) => {
        const levelArr = ['一', '二', '三', '四'];
        item.read = item.read_status;
        if (item.level) {
          if (!isNaN(+item.level)) {
            item.level = levelArr[+item.level];
          }
        }
        if (!item.read) {
          item.content = item.unit_name
            ? item.unit_name + ': ' + item.info
            : item.info;
          arr.push(item);
        }
      });
      alarmList.value = arr;
      timerAlarm = setInterval(scroll, 3000)
    }
  })
};
const scroll = () => {
  animate.value = true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
  setTimeout(() => {      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
    alarmList.value.push(alarmList.value[0]);  // 将数组的第一个元素添加到数组的
    alarmList.value.shift();               //删除数组的第一个元素
    animate.value = false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
  }, 500)
}
const enterInfo = () => {
  clearInterval(timerAlarm)
}
const leaveInfo = () => {
  timerAlarm = setInterval(scroll, 3000)
}
onMounted(() => {
  getAlarmInfo();
  document.addEventListener('click', clickFnc);
});
function clickFnc(e) {
  if (!showBtn.value && !showImgObj.show) {
    showBtn.value = true;
  }
  if (showImgObj.show) {
    showImgObj.show = false;
  }
}
onUnmounted(() => {
  timerAlarm && clearInterval(timerAlarm);
  timers && clearInterval(timers);
  document.removeEventListener('click', clickFnc);
});
</script>

<template>
  <div class="view">
    <div class="bgBottom"></div>
    <div class="bgBox">
      <img :src="Rt.bigImg" v-if="Rt.bigImg"/>
    </div>
    
    <DataSide :sensors="Rt.sensors" v-if="Rt.sensors.length">
      <div class="info-box" @mouseenter="enterInfo" @mouseleave="leaveInfo">
        <div class="info" v-if="alarmList.length > 0" :class="{ 'anim': animate == true }">
          <div class="box" v-for="(  item, index  ) in   alarmList  " :key="index">
            <div class="top flex flex-sb-center">
              <span class="eps">{{ item.unit_name }} </span>
              <span>{{ item.create_time }}</span>
            </div>
            <div class="top flex flex-sb-center">
              <span class="eps">{{ item.info }}</span>
              <span>{{ item.value }}</span>
            </div>
          </div>
        </div>
        <div class="info_none" v-else>暂无消息</div>
      </div>
    </DataSide>
    
    <div class="mid-bottom " v-if="Rt.picImglist.length > 0" @click.stop>
      <div class="b flex flex-center">
        <div class="pic-wrapper flex" :class="{ bt: !showBtn }">
          <div class="pic-list" v-for="(item, index) in Rt.picImglist" :key="index">
            <h5>{{ item.n }}</h5>
            <img :src="item.v" @click="showImgAll(index)">
          </div>
        </div>
      </div>
    
      <div class="flex flex-center">
        <div class="show-btn flex flex-center-center" @click="toggleImg">
          <template v-if="showBtn">
            <el-icon color="#ffffff" ><ArrowUpBold /></el-icon>
            <span>展开</span>
          </template>
          <template v-else>
            <el-icon color="#ffffff"><ArrowDownBold /></el-icon>
            <span>收起</span>
          </template>
        </div>
      </div>
    </div>
  </div>
  
  <detail :modalInfo="showImgObj" @to-father-value="toFatherValue"> </detail>
</template>

<style scoped lang="scss">
.view {
  background: url('./pic/bg.jpg') no-repeat center;
  background-size: cover;
  position: fixed !important;
  left: 0;
  top: 70px;
  width: 100%;
  height: calc(100vh - 70px);
  z-index: 1;
}
.bgBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
  height: 2.5rem;
  background: url('./pic/bot.png') no-repeat center;
  background-size: contain;
  pointer-events: none;
}
.bgBox {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 3.2rem));
  height: 75vh;
  line-height: 75vh;
  width: 75vw;
  text-align: center;
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
.mid-bottom {
  width: 48.2vw;
  padding-top: 2rem;
  position: fixed;
  height: 10rem;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
  .b {
    width: 100%;
    height: 10rem;
  }
  .pic-wrapper {
    transition: all 1s ease;
    position: static;
    bottom: -14rem;
    left: 50%;
    transform: translateY(40rem);
    opacity: 0;
    &.bt {
      transition: all 1s ease;
      position: static;
      bottom: auto;
      left: auto;
      transform: translateY(0rem);
      opacity: 1;
    }
    .pic-list {
      width: 15rem;
      height: 10rem;
      margin-left: 2rem;
      background: url('./pic/ju.png') no-repeat center;
      background-size: 100% 100%;
      padding: 0 2px;
      cursor: pointer;
      h5 {
        height: 2.0rem;
        line-height: 2.3rem;
        font-size: 1.3rem;
        color: #fff;
        padding-left: 8px;
        margin-bottom: 1px;
      }
      img {
        width: 100%;
        height: 7.78rem;
        border-radius: 3px;
      }
    }
  }
  .show-btn {
    margin-top: 2rem;
    width: 19rem;
    height: 2rem;
    background: url('./pic/zhan.png') no-repeat center;
    background-size: contain;
    cursor: pointer;
    &:hover {
      opacity: .82;
    }
    span {
      color: #fff;
      font-size: 1.2rem;
      padding-left: 5px;
      :deep()svg {
        color: #fff !important;
      }
    }
  }
}
  
.info-box {
  height: 70px;
  background: linear-gradient(180deg, rgba(23, 178, 178, 0.12) 0%, rgba(23, 178, 178, 0) 50%, rgba(23, 178, 178, 0.12) 100%);
  overflow: hidden;
  margin: 16px auto;
  width: 94%;
  span {
    white-space: nowrap;
  }
}
.info {
  height: 70px;
  width: 100%;
  .box {
    height: 70px;
    width: 100%;
    .top {
      height: 30px;
      line-height: 30px;
      padding: 0 8px;
      span {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        display: block;
        flex: 0 0 84%;
        text-align: left;
        &:nth-child(2) {
          font-size: 14px;
          text-align: right;
          flex: 0 0 15%;
        }
      }
      &:nth-child(1) {
        span {
          font-size: 14px;
          flex: 0 0 50%;
          color: rgba(255, 255, 255, .8);
          &:nth-child(2) {
            flex: 0 0 50%;
            color: rgba(255, 255, 255, .65);
            font-size: 14px;
          }
        }
      }
    }
    .msg {
      padding: 0 8px;
      line-height: 30px;
      div {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }
  &.anim {
    transition: all 0.5s;
    margin-top: -5.4rem;
  }
}
.info_none {
  height: 100%;
  font-size: 12px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
  img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
}
</style>